<template>
    <div  class="tp">
    <el-row>
        <el-col :span="6" v-for="row in 4" :key="row">
            <el-row>
                <el-col :span="24" v-for="col in 5" :key="col">
                    <el-card class="card">
                        <img :src="getImageUrl(row, col)" class="image">
                        <div style="padding: 14px;">
                            <span>好吃的汉堡</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ currentDate }}</time>
                                <el-button type="text" class="button">操作按钮</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            currentDate: new Date().toLocaleDateString(),
            imageUrls: [
                ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"],
                ["image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg", "image10.jpg"],
                ["image11.jpg", "image12.jpg", "image13.jpg", "image14.jpg", "image15.jpg"],
                ["image16.jpg", "image17.jpg", "image18.jpg", "image19.jpg", "image20.jpg"]
            ]
        };
    },
    methods: {
        getImageUrl(row, col) {
            // return require('@/static/' + this.imageUrls[row][col]);

            console.log(row,col);
        }
    }
};
</script>
  
<style >
.tp{
    width: 70%;
    height: 80%;
    margin: auto;
    align-items: center;
    border: 10px double #000;
    border-radius: 2%;
    border-width: 5px;

}

.card{

padding-left: 10px;

}


.image {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
</style>